<template>
	<view>
		<gameBasics backgroundColor="rgba(0,0,0,0)" />
		<view class="bg">
		
		</view>
		
		<view class="card">
			<view class="title">恭喜您所在的队伍获得 {{myTeam.rank==1?'冠军队':myTeam.rank==2?'卓越队':myTeam.rank==3?'精英队':'优秀队'}} 称号</view>	
			<view class="" style="text-align: center;" v-if="!userPeople.bagesList">
				等待队长授予队员勋章
			</view>
			<view class="" v-else>
				<view class="" style="text-align: center;margin-bottom: calc(20vmin / 7.5);">
					恭喜你获得勋章
				</view>
				<view class="" style="display: flex;justify-content: center;">
					<view class="image" v-for="(item ,index) in  userPeople.bagesList">
						<image src="/static/honor.png" mode="aspectFill"></image>
						<view class="text">
							{{item.title}}
						</view>
					</view>
					<!-- <image src="item.pic" v-for="(item ,index) in" mode=""></image> -->
				</view>
			</view>
			
			<view class="btn" @click="goOver">
				查看战绩
			</view>
		</view>
		<!-- <gameLoading/> -->
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				userPeople:{},
				teamList:[],
				myTeam:{},
				acceptStatus:true
			}
		},


		onUnload() {
			this.acceptStatus=false
			// uni.$off('onMessage') 
		},

		mounted() {
			// this.$store.commit('switchGame', {
			// 	code: false
			// })
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			uni.$on('onMessage',(res)=>{
				console.log('=====',res)
				if(!this.acceptStatus) return;
				this.gameData = res.data.game
				this.userPeople = res.data.userPeople
				let bages=res.data.bages
				bages.forEach(item=>{ 
					if(this.userPeople.user_id==item.user_id){
						this.userPeople.bagesList=item.list
					}
				}) 
				this.teamList=res.data.team
			
				this.myTeam=this.teamList.filter(item=>item.id==this.userPeople.teamId)[0]
			})
		let game_id = uni.getStorageSync("gameId")
		let userData = uni.getStorageSync("userData")			
		this.$ws.socketTask.send({
			data: JSON.stringify({ 
			game_id,
			user_id: userData.id
		}),
			async success() {
				console.log("消息发送成功")
			}
		});
		},
		methods: {
			goOver(){
				uni.redirectTo({
					url:'./over/over'
				})
			}
		}
	}
</script>

<style lang="scss">
	.card{
		background-color: #fff;
		width: 80vw;
		height: calc(560vmin / 7.5);
		box-shadow: 0 0 calc(12vmin / 7.5) #999999;
		border-radius: calc(12vmin / 7.5);
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		.title{
			text-align: center;
			padding: calc(20vmin / 7.5);
			color: #FF5A5A;
			font-size: calc(38vmin / 7.5);
			font-weight: 700;
		}
	}
	.bg {
			margin: 0;
			padding: 0;
			min-height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
	
			background-color: rgba(249, 204, 104, .8);
			overflow: hidden;
		}
	
		.bg::before,
		.bg::after {
			content: '';
			position: absolute;
			bottom: 15vh;
			min-width: 300vw;
			min-height: 300vw;
			background-color: #fff;
			animation: rote 10s linear infinite;
		}
	
		.bg::before {
			left: -95%;
			border-radius: 45%;
			opacity: .5;
		}
	
		.bg::after {
			left: -95%;
			border-radius: 46%;
		}
	
		@keyframes rote {
			from {
				transform: rotateZ(0);
			}
	
			to {
				transform: rotateZ(360deg);
			}
		}
		.btn{
			width: calc(200vmin / 7.5);
			height: calc(66vmin / 7.5);
			background-color: #000000;
			font-size: calc(32vmin / 7.5);
			color: #FFFFFF;
			line-height: calc(66vmin / 7.5);
			text-align: center;
			border-radius: calc(66vmin / 7.5);
			position: absolute;
			bottom: calc(20vmin / 7.5);
			right: calc(20vmin / 7.5);
			
		}
		// .image{
		// 	width: calc(200vmin / 7.5);height: calc(200vmin / 7.5);border-radius: calc(12vmin / 7.5);margin-left: calc(20vmin / 7.5);
		// }
		.image {
			width: calc(200vmin / 7.5);
			height: calc(200vmin / 7.5);
			position: relative;
			margin: calc(28vmin / 7.5) 0;
		
			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		
			.text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: calc(16vmin / 7.5);
				color: #D4B683;
			}
		}
	
</style>
